<template>
  <div
    v-if="!removeByEmpty || eqProps.length > 0"
    :class="[!loading && eqProps.length === 0 ? 'flex flex-col h-full' : '']"
  >
    <div v-if="title" class="py-4.5 text-color-main font-semibold text-lg"> {{ title }} </div>
    <a-skeleton v-if="loading" active></a-skeleton>
    <div v-else-if="eqProps.length > 0" class="flex flex-wrap -mb-4.5">
      <div
        v-for="(el, i) in eqProps"
        :key="i"
        class="mb-4.5 w-1/3"
        :class="[center ? 'text-center' : '']"
        :style="typeof colNum == 'number' ? { width: (1 / colNum) * 100 + '%' } : {}"
      >
        <div v-if="typeof el.value === 'boolean'" class="mb-1">
          <span v-if="el.value" class="text-xl font-semibold text-color-success" :class="textClass">ON</span>
          <span v-else class="text-xl font-semibold text-color-danger" :class="textClass">OFF</span>
          <!-- <Icon
            :type="el.value ? 'icon-duihao' : 'icon-guanbi'"
            class="text-xl"
            :class="[el.value ? 'text-color-success' : 'text-color-danger']"
          /> -->
        </div>
        <div v-else class="mb-1">
          <span class="text-color-main text-2xl font-semibold" :class="textClass">{{ handleValue(el.value) }}</span>
          <span v-if="el.unit" class="text-color-secondary text-xs ml-1" :class="textClass">{{ el.unit }}</span>
        </div>
        <div class="text-color-secondary" :class="textClass">
          <span class="inline-block" :style="labelStyle">{{ el.name }}</span>
        </div>
      </div>
    </div>
    <div v-else class="flex items-center justify-center flex-1">
      <SlEmpty />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, CSSProperties } from "vue";
import type {
  EqPropListResult,
  EquipmentPropResult,
  GroupCode,
  ParamItem,
  PropItem,
} from "/@/api/aiot/equipment/models";
import { isNullOrUndefOrEmpty, handleValue } from "/@/utils/common";

const props = defineProps<{
  data?: EquipmentPropResult | null;
  listData?: EqPropListResult | null;
  colNum: number | "auto";
  groupCode?: GroupCode;
  exceptGroupCode?: GroupCode;
  loading: boolean;
  maxNum?: number;
  title?: string;
  removeByEmpty?: boolean;
  textClass?: string;
  center?: boolean;
  more?: boolean;
  labelStyle?: CSSProperties;
}>();

const emits = defineEmits(["update:more"]);

const eqProps = computed(() => {
  const result: ParamItem[] = [];
  if (!props.data && !props.listData) return result;
  let more = false;
  if (props.data) {
    const keys = props.data.keys;
    for (let key in keys) {
      const obj = keys[key];
      if (((props.groupCode || props.groupCode === "") && obj.groupCode !== props.groupCode) || !obj.display) continue;
      if (!props.exceptGroupCode || props.exceptGroupCode !== obj.groupCode) {
        let value = obj.value;
        if (isNullOrUndefOrEmpty(value)) {
          value = "--";
        } else if (typeof value !== "boolean") {
          let _value = +value;
          if (_value || _value === 0) {
            value = _value;
          }
        }
        if (props.maxNum && result.length >= props.maxNum) {
          more = true;
          break;
        }
        result.push({
          key,
          name: obj.desc,
          value,
          unit: obj.unit,
          display: obj.display,
          type: obj.type,
        });
      }
    }
  } else {
    const listData = props.listData as EqPropListResult;
    let propItems: PropItem[] | null = null;
    if (props.groupCode) {
      switch (props.groupCode) {
        case "control_param":
          propItems = listData.controlParam;
          break;
        case "operating_param":
          propItems = listData.operatingParam;
          break;
        case "key_param":
          propItems = listData.keyParam;
          break;
      }
    } else {
      propItems = listData.keyParam.concat(listData.controlParam).concat(listData.operatingParam);
    }
    if (propItems) {
      for (let i = 0; i < propItems.length; i++) {
        const item = propItems[i];
        if (item.display) {
          let value = item.value;
          if (isNullOrUndefOrEmpty(value)) {
            value = "--";
          } else if (typeof value !== "boolean") {
            let _value = +value;
            if (_value || _value === 0) {
              value = _value;
            }
          }
          if (props.maxNum && result.length >= props.maxNum) {
            more = true;
            break;
          }
          result.push({
            key: item.key as string,
            name: item.desc,
            value,
            unit: item.unit,
            display: item.display,
            type: item.type,
          });
        }
      }
    }
  }
  emits("update:more", more);
  return result;
});
defineExpose({
  eqProps,
});
</script>
